<template>
  <div>
    <img class="w-full h-full object-cover" src="@/assets/images/earch.jpg" alt="Filtered Image"
      style="filter: url(#filter);" />
  </div>
  <svg hidden id="svg" width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <filter id="filter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
        primitiveUnits="userSpaceOnUse">
        <feTurbulence type="turbulence" baseFrequency="0.0 0.4" numOctaves="2" seed="2" stitchTiles="stitch" x="0%"
          y="0%" width="100%" height="100%" result="turbulence" />
        <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" xChannelSelector="R" yChannelSelector="B"
          x="0%" y="0%" width="100%" height="100%" result="displacementMap" />
      </filter>
    </defs>
  </svg>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
// 添加一个变量来存储feTurbulence元素的引用
let feTurbulenceElement: SVGFETurbulenceElement | null = null;
// 添加时间变量用于动画计算
let animationTime = 0;

onMounted(() => {
  // 获取feTurbulence元素
  feTurbulenceElement = document.querySelector('feTurbulence');

  // 添加动画循环来更新feTurbulence属性
  const updateTurbulence = () => {
    if (feTurbulenceElement) {
      // 使用时间变量创建规律变化的效果
      animationTime += 0.01;

      // 使用正弦函数创建规律变化的baseFrequency值
      const frequencyX = 0.01 + Math.abs(Math.sin(animationTime)) * 0.05;
      const frequencyY = 0.05 + Math.abs(Math.cos(animationTime * 0.7)) * 0.1;

      // 更新feTurbulence的baseFrequency属性
      feTurbulenceElement.baseFrequencyX.baseVal = frequencyX;
      feTurbulenceElement.baseFrequencyY.baseVal = frequencyY;
    }

    // 继续动画循环
    requestAnimationFrame(updateTurbulence);
  };
  // 启动动画循环
  updateTurbulence();
})
</script>
<style scoped lang="scss"></style>